<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-v-for的CRUD案例</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--1.准备一个div容器-->
<div id="app">
    <input type="text" name="id" placeholder="编号" v-model="addUser.id">
    <input type="text" name="userName" placeholder="姓名" v-model="addUser.name">
    <input type="text" name="address" placeholder="地址" v-model="addUser.address">
    <select name="sex" id="sex" v-model="addUser.sex">
        <option>女</option>
        <option>男</option>
    </select>
    <button @click="addRow()">添加</button>
    <input type="text" name="selectName" placeholder="姓名" v-model="selectName">
    <button @click="selectByName()">搜索</button>
    <hr>
    <table border="1px red solid" cellpadding="0" cellspacing="0px" style="width: 800px;">
        <tr align="center">
            <th>编号</th>
            <th>姓名</th>
            <th>地址</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr align="center" id="showUser" v-for="i in userList">
            <td>{{i.id}}</td>
            <td>{{i.name}}</td>
            <td>{{i.address}}</td>
            <td>{{i.sex}}</td>
            <td>
                <button>修改</button>
                <button @click="delRow()">删除</button>
            </td>
        </tr>
    </table>
    <br>
    <input type="text" name="id" placeholder="编号" v-model="updateUser.id">
    <input type="text" name="userName" placeholder="姓名" v-model="updateUser.name">
    <input type="text" name="address" placeholder="地址" v-model="updateUser.address">
    <select name="sex" id="sex" v-model="updateUser.sex">
        <option>女</option>
        <option>男</option>
    </select>
    <button @click="updateRow(index)">修改</button>
</div>
<script>
    <!--2.准备一个Vue对象和容器绑定-->
    const vm = new Vue({
        el: "#app",
        data: {
            // 数组初始数据
            userList: [
                {id: "1", name: "小明", address: "武汉", sex: "男"},
                {id: "2", name: "小红", address: "东菀", sex: "女"},
                {id: "3", name: "小芳", address: "佛山", sex: "女"},
                {id: "4", name: "小丽", address: "深圳", sex: "女"},
            ],
            // 添加对象
            addUser: {
                id: undefined,
                name: undefined,
                address: undefined,
                sex: undefined,
            },
            // 根据姓名查找
            selectName: undefined,
            // 根据 id 修改
            updateUser: {
                id: undefined,
                name: undefined,
                address: undefined,
                sex: undefined,
            }
        },
        methods: {
            // 添加用户
            addRow: function () {
                // 判断输入的 id 是否重复
                let flag = false;
                for (let i = 0; i < this.userList.length; i++) {
                    if (this.userList[i].id == this.addUser.id) {
                        flag = true;
                        break;
                    }
                }
                if (flag === true) {
                    alert("编号重复！");
                } else {
                    this.userList.push(this.addUser);
                }
            },

            // 根据姓名查找
            selectByName: function () {
                /*// 遍历 userList
                for (let i = 0; i < this.userList.length; i++) {
                    let user = this.userList[i];
                    if (user.name == this.selectName) {
                        alert("id: "+user.id+", name: "+user.name+", address: "+user.address+", sex: "+user.sex);
                        break;
                    }
                }*/
                this.userList = [
                    {id: 1, name: "小明", address: "武汉", sex: 1},
                    {id: 2, name: "小红", address: "东莞", sex: 0},
                    {id: 3, name: "小芳", address: "佛山", sex: 0},
                    {id: 4, name: "小丽", address: "深圳", sex: 0},
                ];
                this.userList=this.userList.filter(i=>{
                    return i.name.indexOf(this.selectName)!==-1;
                })
                /*this.userList=this.userList.filter(i=>{
                    return i.name.indexOf(this.selectName)!==-1;
                })*/
            },

            // 删除
            delRow: function () {
                $(event.target).parent().parent().remove();
            },

            // 修改
            updateRow: function () {
                let flag = false;
                for (let i = 0; i < this.userList.length; i++) {
                    if (this.userList[i].id == this.updateUser.id) {
                        flag = true;
                        break;
                    }
                }
                if (flag == false) {
                    alert("id不存在");
                } else {
                    for (let i = 0; i < this.userList.length; i++) {
                        let user = this.userList[i];
                        if (user.id == this.updateUser.id) {
                            user.name = this.updateUser.name;
                            user.address = this.updateUser.address;
                            user.sex = this.updateUser.sex;
                        }
                    }
                }
            }
        },
    });
</script>
</body>
</html>